<template>
  <div class="app-container">
    <!-- 侧边栏 -->
    <el-aside width="220px" class="sidebar-container">
      <div class="logo-container">
        <span class="logo-text">校园拼车系统</span>
        <span class="sub-text" v-if="userInfo && userInfo.isAdmin && userInfo.isDriver">多重身份</span>
        <span class="sub-text" v-else-if="userInfo && userInfo.isAdmin">管理端</span>
        <span class="sub-text" v-else-if="userInfo && userInfo.isDriver">司机端</span>
        <span class="sub-text" v-else>乘客端</span>
      </div>
      <el-menu
        :default-active="activeMenu"
        background-color="#304156"
        text-color="#bfcbd9"
        active-text-color="#409EFF"
        router
        unique-opened
      >
        <!-- 多重身份的用户显示分组菜单 -->
        <template v-if="userInfo && userInfo.isDriver && userInfo.isAdmin">
          <!-- 司机功能分组 -->
          <el-sub-menu index="driver-menu">
            <template #title>
              <el-icon><Van /></el-icon>
              <span>司机功能</span>
            </template>
            <el-menu-item index="/account">
              <el-icon><UserFilled /></el-icon>
              <span>账户管理</span>
            </el-menu-item>
            <el-menu-item index="/orders">
              <el-icon><Tickets /></el-icon>
              <span>历史订单</span>
            </el-menu-item>
            <el-menu-item index="/qualification">
              <el-icon><Document /></el-icon>
              <span>资质管理</span>
            </el-menu-item>
          </el-sub-menu>
          
          <!-- 管理员功能分组 -->
          <el-sub-menu index="admin-menu">
            <template #title>
              <el-icon><Setting /></el-icon>
              <span>管理员功能</span>
            </template>
            <el-menu-item index="/monitor">
              <el-icon><Monitor /></el-icon>
              <span>行程监控</span>
            </el-menu-item>
            <el-menu-item index="/alerts">
              <el-icon><AlarmClock /></el-icon>
              <span>求救处理</span>
            </el-menu-item>
            <el-menu-item index="/qualifications-review">
              <el-icon><Document /></el-icon>
              <span>资质审核</span>
            </el-menu-item>
            <el-menu-item v-if="userInfo.phone === 'admin'" index="/users-management">
              <el-icon><User /></el-icon>
              <span>用户管理</span>
            </el-menu-item>
            <!-- 添加adminRoot用户管理菜单 -->
            <el-menu-item v-if="userInfo.phone === 'adminRoot'" index="/user-management">
              <el-icon><User /></el-icon>
              <span>用户管理</span>
            </el-menu-item>
            <!-- 添加adminRoot学生管理菜单 -->
            <el-menu-item v-if="userInfo.phone === 'adminRoot'" index="/student-management">
              <el-icon><School /></el-icon>
              <span>学生管理</span>
            </el-menu-item>
          </el-sub-menu>
        </template>
        
        <!-- 单一身份司机菜单 -->
        <template v-else-if="userInfo && userInfo.isDriver">
          <el-menu-item index="/account">
            <el-icon><UserFilled /></el-icon>
            <span>账户管理</span>
          </el-menu-item>
          <el-menu-item index="/orders">
            <el-icon><Tickets /></el-icon>
            <span>历史订单</span>
          </el-menu-item>
          <el-menu-item index="/qualification">
            <el-icon><Document /></el-icon>
            <span>资质管理</span>
          </el-menu-item>
        </template>

        <!-- 单一身份管理员菜单 -->
        <template v-else-if="userInfo && userInfo.isAdmin">
          <el-menu-item index="/monitor">
            <el-icon><Monitor /></el-icon>
            <span>行程监控</span>
          </el-menu-item>
          <el-menu-item index="/alerts">
            <el-icon><AlarmClock /></el-icon>
            <span>求救处理</span>
          </el-menu-item>
          <el-menu-item index="/qualifications-review">
            <el-icon><Document /></el-icon>
            <span>资质审核</span>
          </el-menu-item>
          <el-menu-item v-if="userInfo.phone === 'admin'" index="/users-management">
            <el-icon><User /></el-icon>
            <span>用户管理</span>
          </el-menu-item>
          <!-- 添加adminRoot用户管理菜单 -->
          <el-menu-item v-if="userInfo.phone === 'adminRoot'" index="/user-management">
            <el-icon><User /></el-icon>
            <span>用户管理</span>
          </el-menu-item>
          <!-- 添加adminRoot学生管理菜单 -->
          <el-menu-item v-if="userInfo.phone === 'adminRoot'" index="/student-management">
            <el-icon><School /></el-icon>
            <span>学生管理</span>
          </el-menu-item>
        </template>

        <!-- 乘客菜单 -->
        <template v-else-if="userInfo && !userInfo.isAdmin && !userInfo.isDriver">
          <el-menu-item index="/booking">
            <el-icon><Plus /></el-icon>
            <span>预约拼车</span>
          </el-menu-item>
          <el-menu-item index="/passenger-orders">
            <el-icon><Tickets /></el-icon>
            <span>历史订单</span>
          </el-menu-item>
          <el-menu-item index="/current-trip">
            <el-icon><Location /></el-icon>
            <span>当前行程</span>
          </el-menu-item>
          <el-menu-item index="/profile">
            <el-icon><UserFilled /></el-icon>
            <span>个人中心</span>
          </el-menu-item>
        </template>
      </el-menu>
    </el-aside>
    
    <!-- 主区域 -->
    <el-container class="main-container">
      <!-- 顶部栏 -->
      <el-header height="60px" class="header">
        <div class="header-left">
          <el-icon class="header-icon"><Menu /></el-icon>
        </div>
        <div class="header-right">
          <el-dropdown trigger="click" class="avatar-dropdown">
            <div class="avatar-container">
              <el-avatar :size="36" :src="userInfo?.avatarUrl || defaultAvatar" />
              <span class="username">{{ userInfo?.nickname || '用户' }}</span>
            </div>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item divided @click="logout">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </el-header>
      
      <!-- 内容区域 -->
      <el-main class="main-content">
        <router-view v-slot="{ Component }">
          <transition name="fade" mode="out-in">
            <component :is="Component" />
          </transition>
        </router-view>
      </el-main>
    </el-container>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { ElMessageBox } from 'element-plus'
import { 
  Van, UserFilled, Tickets, Document, Setting, Monitor, 
  AlarmClock, User, Plus, Location, Menu, School 
} from '@element-plus/icons-vue'

const router = useRouter()
const route = useRoute()

// 用户信息
const userInfo = ref(null)
const unreadCount = ref(0)
const defaultAvatar = 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'

// 计算当前激活的菜单
const activeMenu = computed(() => route.path)

// 组件挂载后从本地存储获取用户信息
onMounted(() => {
  const storedUserInfo = localStorage.getItem('userInfo')
  if (storedUserInfo) {
    userInfo.value = JSON.parse(storedUserInfo)
    // 模拟未读消息
    unreadCount.value = Math.floor(Math.random() * 5)
  } else {
    // 如果没有用户信息，重定向到登录页
    router.push('/login')
  }
})

// 跳转到个人信息页面
const goToProfile = () => {
  router.push('/profile')
}

// 退出登录
const logout = () => {
  ElMessageBox.confirm('确定要退出登录吗?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    // 清除本地存储的用户信息
    localStorage.removeItem('token')
    localStorage.removeItem('userInfo')
    
    // 跳转到登录页
    router.push('/login')
  }).catch(() => {
    // 取消退出
  })
}
</script>

<style scoped>
html, body, #app {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.app-container {
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100vh;
  width: 100vw;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.sidebar-container {
  height: 100%;
  background-color: #304156;
  transition: width 0.3s;
  overflow-y: auto;
  flex-shrink: 0;
}

.logo-container {
  height: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #2b3649;
  padding: 0 10px;
}

.logo-text {
  color: #ffffff;
  font-size: 18px;
  font-weight: bold;
}

.sub-text {
  color: #a8abb2;
  font-size: 12px;
  margin-top: 2px;
}

.main-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0; /* 防止flex子项溢出 */
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
  padding: 0 20px;
  height: 60px;
  flex-shrink: 0;
}

.header-icon {
  font-size: 20px;
  cursor: pointer;
}

.header-right {
  display: flex;
  align-items: center;
}

.notification {
  margin-right: 20px;
  font-size: 20px;
  cursor: pointer;
}

.avatar-container {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.username {
  margin-left: 8px;
  font-size: 14px;
}

.main-content {
  padding: 20px;
  background-color: #f0f2f5;
  overflow-y: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* 确保所有路由视图内容也能适应容器 */
.main-content > div {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  flex: 1;
}
</style> 